<template>
  <view class="container">
    <!-- 背景图 -->
    <image :src="playlist.coverImgUrl" class="blur-image" mode="aspectFill"></image>
    <!-- 颜色遮罩层 -->
    <view class="color-overlay"></view>
    <!-- 固定内容区域 -->
    <view class="fixed-content">
      <!-- 头部区域 -->
      <UniMusicHead class="music-head" :title="playlist.name"></UniMusicHead>
      <view class="header" :style="headerStyle">
        <view class="cover-img-container"> 
          <image class="cover-img" :src="playlist.coverImgUrl" mode="aspectFill" />
          <view class="play-count-overlay">
            <text class="play-count-icon">▶</text>
            <text class="play-count-text">{{ playlist.playCount | formatCount }}</text>
          </view>
        </view>
        <view class="header-content">
          <text class="title">{{ playlist.name }}</text>
          <view class="meta">
            <view class="creator-info">
              <text class="creator-name">网易云音乐</text>
            </view>
          </view>
          
          <text class="description">{{ playlist.description }}</text>
        </view>
      </view>
    </view>
    <!-- 歌曲列表 -->
    <view class="song-list-container">
      <view class="handle-bar"></view>
      <scroll-view   scroll-y  class="song-list-scroll"  @scrolltolower="loadMore" 
	   :show-scrollbar="false" enable-flex >
        <view class="song-list">
          <!-- 播放全部按钮作为列表第一项 -->
          <view class="song-item play-all-item" @tap="handlePlayAll">
            <view class="song-info">
              <view class="title-wrapper">
                <span class="iconfont icon-bofang"></span>
                <text class="title" style="margin-left: 10px;">播放全部 <span class="track-count">(共{{ playlist.trackCount }}首)</span></text>
              </view>
            </view>
          </view>
          <view v-for="(track, index) in playlist.tracks"   :key="track.id" 
            class="song-item"
            @tap="playSong(track, index)"
          >
            <text class="index">{{ index + 1 }}</text>
            <view class="song-info">
              <view class="title-wrapper">
                <text class="title">{{ track.name }}</text>
              </view>
              <view class="artist-info">
                <view class="tag-container">
                  <text v-if="track.vip" class="vip-tag">VIP</text>
                  <text v-if="track.sq" class="sq-tag">SQ</text>
                </view>
                <text class="artist">{{ track.ar[0] ? track.ar[0].name : '未知歌手' }}</text>
                <text class="original" v-if="track.originSong">| 原唱: {{ track.originSong.artist }}</text>
              </view>
            </view>
            <text class="play-icon"><span class="iconfont icon-bofang"></span></text>
          </view>
          <!-- 加载更多提示 -->
          <view v-if="isLoading" class="loading-more">
            <text>加载中...</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getPlaylistDetail } from '@/common/api.js';

export default {
  data() {
    return {
      playlist: {
        coverImgUrl: '',
        name: '加载中...',
        playCount: 0,
        updateTime: Date.now(),
        trackCount: 0,
        tracks: []
      },
      listId: null, // 存储榜单ID
      isLoading: false, // 加载状态
      page: 1, // 当前页码
      pageSize: 20 // 每页数量
    };
  },
  computed: {
    // 计算属性不再处理背景色，因为我们使用封面图片作为背景
    headerStyle() {
      return {};
    }
  },
  filters: {
    formatCount(val) {
      return val > 100000000 ? `${(val / 100000000).toFixed(1)}亿` : `${val}`;
    },
    formatDate(timestamp) {
      const date = new Date(timestamp);
      return `${date.getMonth() + 1}月${date.getDate()}日`;
    }
  },
  onLoad(options) {
    if (options.listid) {
      this.listId = options.listid; // 保存榜单ID
      this.loadPlaylistDetail(options.listid);
    } 
  },
  methods: {
    async loadPlaylistDetail(id) {
      try {
        const playlist = await getPlaylistDetail(id);
        console.log('歌单详情：', playlist);
        console.log('歌单ID：', id, '歌单名称：', playlist.name);
        this.playlist = {
          id: playlist.id,
          coverImgUrl: playlist.coverImgUrl,
          name: playlist.name,
          playCount: playlist.playCount,
          updateTime: playlist.updateTime,
          description: playlist.description || '暂无简介',
          trackCount: playlist.trackCount,
          tracks: playlist.tracks.map(track => {
            // 获取歌曲信息
            const isVip = track.fee === 1; // fee=1 表示VIP歌曲
            // 更新SQ音质判断逻辑，使用999000作为标准
            const hasSQ = track.privilege && track.privilege.maxbr >= 999000;
            return {
              id: track.id,
              name: track.name,
              fee: track.fee,
              ar: track.ar || [],
              originSong: track.originSong || null,
              vip: isVip,
              sq: hasSQ,
              // 预留可能需要的附加字段
              privilege: track.privilege
            };
          })
        };
      } catch (error) {
        uni.showToast({ 
          title: `加载失败: ${error.message}`, 
          icon: 'none',
          duration: 3000
        });
      }
    },
    handlePlayAll() {
      // 播放全部逻辑
      console.log('播放全部歌曲');
      // 如果有歌曲，播放第一首
      if (this.playlist.tracks && this.playlist.tracks.length > 0) {
        this.playSong(this.playlist.tracks[0], 0);
      } else {
        uni.showToast({
          title: '暂无可播放歌曲',
          icon: 'none'
        });
      }
    },
    async loadMore() {
      if (this.isLoading) return;
      this.isLoading = true;
      try {
        const newTracks = await this.loadMoreTracks();
        this.playlist.tracks.push(...newTracks);
        this.page++;
      } catch (error) {
        uni.showToast({ 
          title: `加载失败: ${error.message}`, 
          icon: 'none',
          duration: 3000
        });
      } finally {
        this.isLoading = false;
      }
    },
    async loadMoreTracks() {
      // 模拟加载更多歌曲
      console.log('加载更多歌曲，当前页码:', this.page);
      // 这里应该通过API加载更多歌曲
      // 由于示例目的，这里模拟延迟并返回空数组
      await new Promise(resolve => setTimeout(resolve, 1000));
      // 实际应用中，应该调用API获取下一页数据
      // 如果没有更多数据，可以返回空数组
      return [];
    },
    playSong(track, index) {
      console.log('播放歌曲ID:', track.id);
      uni.navigateTo({
        url: `/pages/player/player?id=${track.id}&index=${index}}`
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.fixed-content {
  position: relative;
  z-index: 2;
}

/* 添加scroll-view的其他属性，增强滚动效果 */
.song-list-scroll {
  flex: 1;
  width: 100%;
  height: 100%; /* 确保滚动区域填满容器 */
  -webkit-overflow-scrolling: touch; /* 平滑滚动 */
  overflow-y: auto; /* 垂直方向自动显示滚动条 */
}

// 添加动态颜色层
.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  z-index: 0;
  background: linear-gradient(45deg, rgba(255,0,92,0.5), rgba(68,0,255,0.5));
  mix-blend-mode: color;
  opacity: 0.4;
}

.blur-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  filter: blur(15px) brightness(0.9) saturate(1.5) contrast(1.1);
  transform: scale(1.1);
  z-index: 1;
  opacity: 0.9;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(transparent, #f5f5f5);
  }
}

.music-head {
  position: absolute;
  top: 40rpx;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: transparent;
}

.header {
  padding: 30rpx;
  padding-top: 160rpx; /* 给头部组件留出更多空间 */
  padding-bottom: 50rpx; /* 增加底部内边距 */
  display: flex;
  color: white;
  position: relative;
  z-index: 2;
  background: transparent;
  
  // 添加渐变覆盖层，增强颜色
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(255,0,0,0.15), rgba(0,0,255,0.15));
    mix-blend-mode: overlay;
  }
  
  .cover-img-container {
    position: relative;
    width: 260rpx;
    height: 260rpx;
    margin-right: 30rpx;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.3);
    border: 3rpx solid rgba(255,255,255,0.4);
    
    .cover-img {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
    
    .play-count-overlay {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      background-color: rgba(0,0,0,0.3);
      border-radius: 20rpx;
      padding: 4rpx 12rpx;
      display: flex;
      align-items: center;
      
      .play-count-icon {
        color: white;
        font-size: 20rpx;
        margin-right: 5rpx;
      }
      
      .play-count-text {
        color: white;
        font-size: 20rpx;
      }
    }
  }

  .header-content {
    flex: 1;
    color: white;
    text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
    
    .title {
      font-size: 40rpx;
      font-weight: bold;
      line-height: 1.3;
      margin-bottom: 20rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .meta {
      margin-bottom: 20rpx;
      
      .creator-info {
        display: flex;
        align-items: center;
        
        .creator-avatar {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          margin-right: 10rpx;
          border: 2rpx solid rgba(255,255,255,0.8);
        }
        
        .creator-name {
          color: rgba(255,255,255,0.9);
          font-size: 24rpx;
        }
      }
    }

    .action-buttons {
      display: flex;
      margin-bottom: 20rpx;
      
      .action-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 30rpx;
        background: rgba(255,255,255,0.2);
        border-radius: 50rpx;
        padding: 10rpx 20rpx;
        
        .action-icon {
          font-size: 30rpx;
          margin-bottom: 6rpx;
        }
        
        .action-text {
          font-size: 22rpx;
        }
      }
    }

    .description {
      font-size: 24rpx;
      color: rgba(255,255,255,0.9);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}

.song-list-container {
  margin-top: -20rpx;
  border-radius: 36rpx 36rpx 0 0;
  overflow: hidden;
  position: relative;
  z-index: 3;
  box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.15);
  flex: 1; /* 让列表容器填充剩余空间 */
  display: flex;
  flex-direction: column;
  background: white;
  height: 65vh; /* 设置固定高度 */
  max-height: 65vh; /* 限制最大高度 */
}

.handle-bar {
  width: 80rpx;
  height: 8rpx;
  background: #e0e0e0;
  border-radius: 20rpx;
  margin: 16rpx auto;
}

.song-list {
  background: white;
  padding: 0 30rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx); /* 适配全面屏底部安全区域 */

  .play-all-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    
    .control-buttons {
      .multi-select-btn {
        background: #f5f5f5;
        color: #666;
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
      }
    }
  }

  .song-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: none; /* 去除下划线 */
    margin-bottom: 6rpx; /* 添加轻微的间距 */

    .index {
      width: 60rpx;
      text-align: center;
      color: #999;
      font-size: 28rpx;
    }

    .song-info {
      flex: 1;
      padding-right: 20rpx;

      .title-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;

        .title {
          font-size: 32rpx;
          color: #333;
          margin-right: 15rpx;
          max-width: 400rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .track-count {
          color: #999;
        }
      }

      .artist-info {
        font-size: 24rpx;
        color: #999;
        display: flex;
        align-items: center;
        
        .tag-container {
          display: flex;
          gap: 10rpx;
          margin-right: 10rpx;
          
          .vip-tag {
            font-size: 24rpx;
            padding: 0 4rpx;
            background-color: #ffeceb;
            color: #d43c33;
            border-radius: 6rpx;
            border: 1px solid #d43c33;
          }
          
          .sq-tag {
            font-size: 24rpx;
            padding: 2rpx 8rpx;
            background-color: #e6f7ff;
            color: #1890ff;
            border-radius: 6rpx;
            border: 1px solid #1890ff;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            height: 28rpx;
            line-height: 1;
            margin-right: 8rpx;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2rpx 4rpx rgba(24, 144, 255, 0.1);
          }
        }
        
        .artist {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 200rpx;
        }
        
        .original {
          color: #ccc;
          margin-left: 10rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .play-icon {
      color: #ccc;
      font-size: 40rpx;
      width: 60rpx;
      text-align: center;
    }
  }

  .loading-more {
    padding: 30rpx 0;
    text-align: center;
    color: #999;
    font-size: 24rpx;
  }
}
</style>